<template>
  <div class="teamContainer">
    <van-card
        style="margin: 2px"
        v-for="team in props.teamList"
        :desc="team.description"
        :title="team.name"
        @clickThumb="doToTeamInfo(team.id)"
    >
      <template #thumb>
        <van-image
            :src="chunWuTeam"
        />
      </template>
      <template #tags>
        <van-tag plain type="danger" style="margin-right: 4px; margin-top: 4px">
          {{ teamStatusEnum[team.status] }}
        </van-tag>
      </template>
      <template #bottom>
        <div style="margin: 2px 0;">
          {{`人数:${team.hasJoinNum} / ${team.maxNum}`}}
        </div>
        <div style="margin: 2px 0;">
          创建时间:{{ team.createTime }}
        </div>
        <div style="margin: 2px 0;">
          过期时间:{{ team.expireTime }}
        </div>
      </template>
      <template #footer style="margin-left: 4px; margin-top: 20px">
        <!--  仅队伍创建人不可见，且未加入队伍才可见 -->
        <van-button v-if="team.userId !== currentUser.id && !team.hasJoin" size="mini" type="primary"
                    @click="doHandleJoinTeam(team)" style="margin-right: 4px">加入队伍
        </van-button>
        <!--  仅队伍创建人可见 -->
        <van-button v-if="team.userId === currentUser.id" size="mini" type="default" @click="doToUpdateTeam(team.id)"
                    style="margin-right: 4px">更新信息
        </van-button>
        <!--  仅队伍创建人不可见，且加入了该队伍才可见 -->
        <van-button v-if="team.userId !== currentUser.id && team.hasJoin" size="mini" type="warning"
                    @click="doQuitTeam(team.id)" style="margin-right: 4px">退出队伍
        </van-button>
        <!--  仅队伍创建人可见 -->
        <van-button v-if="team.userId === currentUser.id" size="mini" type="danger" @click="doDeleteTeam(team.id)"
                    style="margin-right: 4px">解散队伍
        </van-button>
      </template>
    </van-card>
    <van-dialog v-model:show="showPasswordDialog" title="请输入队伍密码" show-cancel-button show-confirm-button
                @confirm="doJoinTeam" @cancel="doCancel">
      <van-field v-model="password" placeholder="请输入队伍密码"/>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">

import type {TeamType} from "../models/Team";
import {teamStatusEnum} from "../constants/TeamStatus.ts";
import chunWuTeam from '../assets/chunWuTeam.jpg';
import {showSuccessToast, showFailToast} from "vant";
import {getCurrentUser} from "../sevices/User.ts";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {joinTeam, quitTeam} from "../api/Team.ts";

interface TeamCardListProps {
  teamList: TeamType[];
}

const router = useRouter();

// 显示输入密码对话框
const showPasswordDialog = ref(false);
// 获取当前用户输入的密码
const password = ref('');
// 获取当前队伍id
const teamId = ref(0);
// 当前用户
const currentUser = ref();

// 页面挂载时，获取当前用户id
onMounted(async () => {
  currentUser.value = await getCurrentUser();
})

/**
 * 加入队伍判断
 * @param team
 */
const doHandleJoinTeam = (team: TeamType) => {
  teamId.value = team.id;
  if (team.status === 0) {
    // 公开队伍，直接加入
    doJoinTeam();
  } else {
    // 加密队伍，弹出密码对话框
    showPasswordDialog.value = true;
  }
};

// 定义默认值
const props = withDefaults(defineProps<TeamCardListProps>(), {
  // @ts-ignore
  teamList: [] as TeamType[],
})

// 加入队伍
const doJoinTeam = async () => {
  const result = await joinTeam(teamId.value, password.value);
  // @ts-ignore
  if (result.code === 0 && result.data) {
    showSuccessToast("加入成功");
    // 刷新页面
    router.go(0);
  } else {
    // @ts-ignore
    showFailToast("加入失败" + (result.description ? `${result.description}` : ''));
    password.value = '';
  }
}

// 退出队伍
const doQuitTeam = async (id: number) => {
  const result = await quitTeam(id);
  console.log(result);
  // @ts-ignore
  if (result.code === 0 && result.data) {
    showSuccessToast("退出成功");
    router.go(0);
  } else {
    // @ts-ignore
    showFailToast("退出失败" + (result.description ? `${result.description}` : ''));
  }
}
// 解散队伍
const doDeleteTeam = async (id: number) => {
  const result = await quitTeam(id);
  console.log(result);
  // @ts-ignore
  if (result.code === 0 && result.data) {
    showSuccessToast("解散成功");
    router.go(0);
  } else {
    // @ts-ignore
    showFailToast("解散失败" + (result.description ? `${result.description}` : ''));
  }
}

// 跳转到更新页面
const doToUpdateTeam = async (id: number) => {
  await router.push({
    path: '/team/update',
    query: {
      id: id,
    },
  });
}

// 取消输入密码对话框
const doCancel = () => {
  password.value = '';
  showPasswordDialog.value = false;
}

// 跳转到队伍详情页面
const doToTeamInfo = async (id: number) => {
  await router.push({
    path: '/team/showInfo',
    query: {
      // 传递队伍id
      id: id,
    },
  });
}

</script>

<style scoped>
.van-toast {
  color: #152b75 !important; /* 确保文字颜色可见，根据实际需求调整 */
  z-index: 9999 !important;
}

.teamContainer :deep(.van-image__img) {
  object-fit: unset;
  height: 120px; /* 固定高度 */
  border-radius: 8px 0 0 8px; /* 圆角*/
}

.teamContainer {
  margin: 4px 4px;
  height: auto;
}
</style>